<template>
  <div class="svgMap">
    <div id="container" style="height: 300px"></div>
  </div>
</template>

<script>
  import $ from 'jquery'
  export default {
    name: 'svgMap',
    data () {
      return {
        dataList: [],
        brand: [],
        brandDtl: [],
        brandData: [],
        num: 0
      }
    },
    methods: {
      loadData () {
        let self = this
        self.dataList = JSON.parse(localStorage.getItem('order'))
        $.each(self.dataList,function (k) {
          self.brand.push(self.dataList[k].orderBrand)
          if(self.brandDtl.indexOf(self.dataList[k].orderBrand) == -1){
            self.brandDtl.push(self.dataList[k].orderBrand)
            self.num = 0
            $.each(self.dataList,function (i) {
              if(self.dataList[k].orderBrand == self.dataList[i].orderBrand){
                  self.num+=Number(self.dataList[i].orderNum)
              }
            })
            let obj = {value: self.num, name: self.dataList[k].orderBrand}
            self.brandData.push(obj)
          }
        })
        self.initMap()
      },
      initMap () {
        let self = this
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        let option = null;
        option = {
          title : {
            text: '各品牌销售量',
            x:'center'
          },
          tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: self.brand
          },
          series : [
            {
              name: '品牌销量',
              type: 'pie',
              radius : '55%',
              center: ['50%', '60%'],
              data:self.brandData,
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        ;
        if (option && typeof option === "object") {
          myChart.setOption(option, true);
        }
      }
    },
    mounted () {
      this.loadData()
    }
  }
</script>

<style scoped>

</style>
